<script setup lang="ts">
import type { Visitor } from '@/types/visitor'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { isValidID } from '@/utils/common'
import { getVisitorDetailApi, postVisitorSaveApi } from '@/services/visitor'

// 表单数据
const form = ref<Visitor>({
  id: 0,
  name: '', // 姓名
  sex: 1, // 性别(1:男,2:女)
  birthday: '', // 出生日期
  mobile: '', // 手机号码
  type: 1, // 证件类型(1:身份证,2:护照)
  credentials: '', // 证件号码
})

const props = defineProps<{ id?: number }>()

// 获取出游人明细数据
const getVisitorDetailData = async () => {
  if (props.id) {
    const res = await getVisitorDetailApi(props.id)
    Object.assign(form.value, res.data)
  }
}

// 页面加载
onLoad(async () => {
  getVisitorDetailData()
})
// 动态设置标题
uni.setNavigationBarTitle({ title: props.id ? '修改出游人' : '新建出游人' })

// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  name: {
    rules: [{ required: true, errorMessage: '请填写出游人姓名' }],
  },
  birthday: {
    rules: [{ required: true, errorMessage: '请填写出生日期' }],
  },
  mobile: {
    rules: [
      { required: true, errorMessage: '请填写联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  credentials: {
    rules: [
      { required: true, errorMessage: '请填写证件号码' },
      {
        validateFunction: function (rule, value, data, callback) {
          if (data.type == 1) {
            return isValidID(value)
          }
          return true
        },
      },
    ],
  },
}

// 表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()

// 提交表单
const onSubmit = async () => {
  try {
    await formRef.value?.validate?.()
    await postVisitorSaveApi(form.value)
    uni.showToast({ icon: 'success', title: props.id ? '修改成功' : '添加成功' })
    setTimeout(() => {
      uni.navigateBack()
    }, 500)
  } catch (error) {
    console.log(error)
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}

const sexs = ref([
  {
    text: '男',
    value: 1,
  },
  {
    text: '女',
    value: 2,
  },
])

const types = ref([
  {
    text: '身份证',
    value: 1,
  },
  {
    text: '护照',
    value: 2,
  },
])
</script>

<template>
  <view class="form">
    <uni-forms ref="formRef" :rules="rules" :modelValue="form">
      <uni-forms-item name="name" label="姓名">
        <uni-easyinput v-model="form.name" placeholder="请填写出游人姓名" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="sex" label="性别">
        <uni-data-checkbox v-model="form.sex" :localdata="sexs" />
      </uni-forms-item>
      <uni-forms-item name="birthday" label="出生日期">
        <uni-datetime-picker
          type="date"
          return-type="string"
          v-model="form.birthday"
          :clear-icon="false"
        />
      </uni-forms-item>
      <uni-forms-item name="mobile" label="手机号码">
        <uni-easyinput v-model="form.mobile" placeholder="请填写手机号码" :clearable="false" />
      </uni-forms-item>
      <uni-forms-item name="type" label="证件类型">
        <uni-data-checkbox v-model="form.type" :localdata="types" />
      </uni-forms-item>
      <uni-forms-item name="credentials" label="证件号码">
        <uni-easyinput v-model="form.credentials" placeholder="请填写证件号码" :clearable="false" />
      </uni-forms-item>
    </uni-forms>

    <button class="button" @click="onSubmit">保存</button>
  </view>
</template>

<style lang="scss">
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;

  .form-item {
    display: flex;
    align-items: center;
  }
  .uni-forms-item__content {
    display: flex;
    align-items: center;
  }

  .button {
    height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: $c-main;
  }
}
</style>
